<template>
        <el-row class="main-cont padd20 box box-tb">
            <el-row class="tl" style="font-size: 20px;font-weight: bold;margin-left: 40px;">
                {{xnxq}}学年度教学任务
            </el-row>
            <el-row class="height100" style="overflow-y: auto;position: relative;">
                <el-row class="mt20 maxwidth" :gutter="20" v-if="cous != null">
                    <el-col class="tl tasktitle">
                        课程任务
                    </el-col>
                    <el-col :span="14" class="list" @click.native="goCourse(cous)"
                        style="margin-left: 90px;margin-top: -40px;">
                        <div class="grid-content bg-white box box-align-center box-pack-start" style="width: 100%;">
                            <div class="box box-align-center" style="width: 80%;">
                                <el-image :src="cous.image" class="img" style="width: 148px;height: 96px;"></el-image>
                                <div class="box box-tb box-pack-start box-align-start ml20">
                                    <h3>{{cous.name}}</h3>
                                    <span>共{{cous.cnt}}章</span>
                                    <span>责任编辑 {{cous.chiefEditor}}</span>
                                </div>
                            </div>
                            <div class="box box-tb box-pack-between box-align-end right" style="width: 20%;">
                                <span class="title">{{cous.material}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col class="tl mt30 tasktitle" style="display: flex;">
                        实践任务
<!--                        <div class="box box-align-center">
                            <div class="item">
                                <span><i>要求</i> 老师发布实践任务数量不少于{{num}}项</span>
                            </div>
                        </div> -->
                    </el-col>
                    <div style="margin-left: 90px;">
                        <el-col :span="10" class="list" v-for="(item,i) in ldsjlist" :key="i"
                            @click.native="goSj(item)">
                            <div class="grid-content2 bg-white box box-align-center box-pack-start">
                                <div class="left box box-pack-start box-align-center">
                                    <el-image :src="item.img" class="img" fit="cover"></el-image>
                                </div>
                                <div class="ml10 box box-tb box-pack-start" style="width: 100%;height: 65px;">
                                    <div class="box box-pack-between box-align-start">
                                        <h3 style="font-size: 18px;">{{item.title}}</h3>
                                        <span class="title" v-if="item.type == '0'">日常生活劳动</span>
                                        <span class="title" v-if="item.type == '1'">生产劳动</span>
                                        <span class="title" v-if="item.type == '2'">服务性劳动</span>
                                    </div>
                                    <div class="ldmb box box-pack-start box-align-start mt10">
                                        <div class="tl" style="width: 80px;">劳动目标：</div>
                                        <div class="ldmb-cont tl">{{item.ldmb}}</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </div>
                </el-row>

                <el-row class="height100 box box-pack-center box-align-center" v-else>
                    <el-empty description="暂无数据" image="../../../static/image/nodata/nodata.png"></el-empty>
                </el-row>
                <!-- <div class="posa box box-tb box-pack-center" v-if="plan != null">
                    <el-image src="/static/image/ewm.jpg" style="width: 150px;height: 150px;"></el-image>
                    <span class="mt10" style="font-size: 13px;color: rgb(63 68 210);">请打开微信扫一扫</span>
                    <span class="mt10" style="font-size: 14px;color: rgb(63 68 210);">发布教学任务</span>
                </div> -->
            </el-row>
        </el-row>
    </template>

    <script>
        export default {
            data() {
                return {
                    loginInfo: this.$store.state.loginInfo,
					schoolid: this.$store.state.schoolId,
                    cous: null,
                    plan: null,
                    ldsjlist: [],
                    num: 0,
                    xnxq: ''
                };
            },
            mounted() {
                this.getTrTask();
                this.jyzXnxqlist()
            },
            methods: {
                jyzXnxqlist() {
                    this.$api.jyz.jyzXnxqlist({
                        schoolid: this.schoolid
                    }).then(res => {
                        if (res.code == '0') {
                            this.xnxq = res.list[2].xn;
                        } else {
                            this.$message.error('请求失败！');
                        }
                    })
                },
                getTrTask() {
                    let params = {
                        schoolid: this.schoolid
                    };
                    this.$api.tr.getTrTask(params).then(res => {
                        if (res.code == '0') {
                            console.log(res);
                            this.cous = res.cous;
                            this.ldsjlist = res.ldsjlist;
                            if (res.plan != null) {
                                this.plan = res.plan;
                                this.num = res.plan.sjNum;
                            }
                        } else {
                            this.$message.error('请求失败！');
                        }
                    })
                },
                selectXnxq(e) {
                    this.xnxq = e;
                    this.getTeachPlanInfo();
                },
                goCourse(item) {
                    this.$router.push({
                        path: "/jxrw/kcxq_tr",
                        query: {
                            id: item.id
                        }
                    })
                    localStorage.setItem('ldkcId', item.id)
                },
                goSj(item) {
                    this.$router.push({
                        path: "/jxrw/sjxq_tr",
                        query: {
                            id: item.id
                        }
                    })
                    localStorage.setItem('ldsjId', item.id)
                },
            }
        }
    </script>

    <style scoped lang="scss">
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .maxwidth {
            max-width: 1400px;
            margin-left: 40px !important;
        }

        .posa {
            position: fixed;
            bottom: 120px;
            right: 100px;
        }

        .list {
            &:first-child {
                .grid-content {
                    border: 1px dotted #6473F9;
                }
            }
        }

        h3 {
            width: 30%;
            font-size: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
        }


        .title {
            margin-top: -10px;
            width: 134px;
            height: 30px;
            line-height: 30px;
            background: #f8f9fc;
            border: 1px solid #d7dcea;
            border-radius: 9px;
            color: #7981bb;
            font-size: 14px;
        }

        .ldmb {
            font-size: 13px;
            color: #53555a;
        }

        .ldmb-cont {
            width: calc(100% - 80px);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;

        }

        .tab {
            width: 158px;
            height: 42px;
            line-height: 42px;
            border-radius: 14px;
            border: 1px solid #E5E6F1;
            background-color: #fff;
            font-size: 18px;

            &:first-child {
                border-radius: 14px 0px 0px 14px;
            }

            &:last-child {
                border-radius: 0px 14px 14px 0px;
                border-left: none;
            }

            &.active {
                background: #626BF1;
                color: #fff;
            }
        }

        .grid-content {
            padding: 0 10px;
            margin-top: 20px;
            height: 134px;
            background: #FFFFFF;
            border: 1px solid #fff;
            border-radius: 12px;
            transition: .3s ease-in-out;
            h3 {
                width: 289px;
            }

            .el-plus {
                display: inline-block;
                width: 32px;
                height: 32px;
                line-height: 26px;
                background: linear-gradient(-13deg, #626BF1, #989BFA);
                border-radius: 16px;
                color: #fff;
                font-size: 26px;
                font-style: normal;
            }

            .img {
                width: 148px;
                height: 96px;
                border-radius: 12px;
            }

            .right {
                height: 96px;

                .title {
                    width: 163px;
                    height: 30px;
                    line-height: 30px;
                    background: #f8f9fc;
                    border: 1px solid #d7dcea;
                    border-radius: 9px;
                    color: #7981bb;
                    font-size: 14px;
                }

                .delete {
                    width: 46px;
                    height: 24px;
                    background: #FFFFFF;
                    border: 1px solid #FF5A77;
                    border-radius: 12px;
                    color: #FF5A77;
                }
            }

            &:hover {
                border: 1px solid #BEBDE6;
                box-shadow: 2px 6px 13px 0px rgba(225, 227, 245, 0.69);
            }
        }

        .grid-content2 {
            padding: 0 10px;
            margin-top: 30px;
            height: 100px;
            background: #FFFFFF;
            border: 1px solid #fff;
            border-radius: 12px;
            transition: .3s ease-in-out;



            .el-plus {
                display: inline-block;
                width: 32px;
                height: 32px;
                line-height: 26px;
                background: linear-gradient(-13deg, #626BF1, #989BFA);
                border-radius: 16px;
                color: #fff;
                font-size: 26px;
                font-style: normal;
            }

            .img {
                width: 100px;
                height: 63px;
                border-radius: 12px;
            }

            .right {
                height: 96px;

                .title {
                    width: 163px;
                    height: 30px;
                    line-height: 30px;
                    background: #e3e5f1;
                    border-radius: 9px;
                    color: #7981bb;
                    font-size: 14px;
                }

                .delete {
                    width: 46px;
                    height: 24px;
                    background: #FFFFFF;
                    border: 1px solid #FF5A77;
                    border-radius: 12px;
                    color: #FF5A77;
                }
            }

            &:hover {
                border: 1px solid #BEBDE6;
                box-shadow: 2px 6px 13px 0px rgba(225, 227, 245, 0.69);
            }
        }

        .bg-white {
            background-color: #fbfbfb;
        }

        .list {
            cursor: pointer;
        }

        .item {
            margin-left: 30px;
            width: 334px;
            height: 40px;
            line-height: 40px;
            background: #dee3f9;
            border-radius: 10px;

            span {
                color: #888bee;
                padding: 20px;

                i {
                    margin-right: 10px;
                    display: inline-block;
                    width: 48px;
                    height: 20px;
                    line-height: 20px;
                    background: #8895ee;
                    border-radius: 3px;
                    text-align: center;
                    color: #fff;
                    font-style: normal;
                }

            }
        }

        .tasktitle {
            font-weight: bold;
        }
    </style>
